<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<ui:composition 
	  xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      template="/view/templates/templateLayout.xhtml">
      
      <ui:define name="conteudo">    
      <link rel="stylesheet" type="text/css" href="./estilos.css"/>  	
  	
<h:form id="formManterCidade" prependId="false">  
	<p:panel id="panelManterCidade" style="margin-bottom:10px;">  
	<f:facet name="header">
		<h:outputText value="Manter Cidade" styleClass="outputTextTitulo"/>
	</f:facet>
 	<p:messages id="messagesCidade" autoUpdate="true" closable="true" showDetail="true"/> 
    	<h:panelGrid  columns="2" style="margin-top:20px; margin-right:10%;">  
            <h:outputLabel value="Código" styleClass="outputLabel"/>  
            <h:outputLabel value="Cidade*" styleClass="outputLabel"/>             
            <p:inputText value="#{cidadeBean.cidadeSave.idCidade}" styleClass="inputId" disabled="true"/>  
  			<p:inputText value="#{cidadeBean.cidadeSave.descricao}" styleClass="inputDescricao"/>  
        </h:panelGrid>  
        <h:panelGrid  columns="1" style="margin-right:10%;">  
            <h:outputLabel value="DDD" styleClass="outputLabel"/>            
            <p:inputMask mask="99" value="#{cidadeBean.cidadeSave.ddd}" styleClass="inputId"/>  			 
        </h:panelGrid>  
        <h:panelGrid id="pgEstadoCidade" columns="3" style="margin-right:10%;">  
            <h:outputLabel value="Código" />  
            <h:outputLabel value="Estado" />         
            <h:outputLabel />
            <p:inputText value="#{cidadeBean.cidadeSave.estado.idEstado}" styleClass="inputId">
            	<p:ajax  listener="#{cidadeBean.onChange}" render="pgEstadoCidade" />
            </p:inputText>  
  			<p:autoComplete  value="#{cidadeBean.cidadeSave.estado.descricao}" 
                    completeMethod="#{cidadeBean.complete}" >
            	<p:ajax event="itemSelect" listener="#{cidadeBean.handleSelect}" update="pgEstadoCidade" />
			</p:autoComplete>   
  			<p:commandButton value="Procurar" actionListener="#{cidadeBean.openDialogConsultarEstado}" immediate="true" styleClass="commandButton" />
        </h:panelGrid>  
    </p:panel>  
    <p:commandButton value="Salvar" actionListener="#{cidadeBean.saveCidade}" update="panelManterCidade, messagesCidade" style="margin-right:20px; margin-left:10px;" /> 
	<p:commandButton value="Cancelar" action="#{cidadeBean.consultarCidade}" style="margin-right:20px;" /> 
	
</h:form>  	

<ui:include src="/view/cidade/dialogConsultarEstado.xhtml"></ui:include>
</ui:define>
</ui:composition>
